<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>页面滚动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }

        body {
            width: 3000px;
            height: 3000px;
        }
    </style>
</head>
<body>
    
    <script type="text/javascript">
        // html => document.documentElement
        var bodyEle = document.body,
            htmlEle = document.documentElement;

        document.onclick = function (){
            // console.log("bodyEle", "\nbodyEle.scrollTop", bodyEle.scrollTop, "\nbodyEle.scrollLeft", bodyEle.scrollLeft);
            // console.log("htmlEle.scrollTop", htmlEle.scrollTop, "\nhtmlEle.scrollLeft", htmlEle.scrollLeft);
            // // offset的o 是 大写的  window.pageX/YOffset 是只读属性
            // console.log("window", "Top", window.pageYOffset, "\nLeft", window.pageXOffset);

            // 赋值  window.scroll(x,y) 移动到某个位置   window.scrollBy(x,y) 相对位移
            // window.pageYOffset = 0;
            // window.pageXOffset = 0;
            window.scrollBy(600, 600);
        }

        // 监听页面滚动使用 window.onscroll
        window.onscroll = function (){
            console.log(getDistance());
        }

        function getDistance(){
            return {
                top: document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop,
                left: document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft,
            }
        }

        
        
    </script>
</body>
</html>